<template>
	<view class="floating-container">
		<!-- 菜单选项 - 从按钮中弹出 -->
		<view
			class="menu-items"
			:style="{
				transform: isOpen ? 'scale(1)' : 'scale(0)',
				opacity: isOpen ? 1 : 0,
				transition: 'all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28)'
			}"
		>
			<button
				class="menu-item"
				:style="{
					transitionDelay: '240ms',
					opacity: isOpen ? 1 : 0,
					transform: isOpen ? 'translateY(0) scale(1)' : 'translateY(10px) scale(0.8)'
				}"
				@click.stop="handleMenuItemClick('edit')"
			>
				<uni-icons type="location"></uni-icons>
			</button>

			<button
				class="menu-item"
				:style="{
					transitionDelay: '180ms',
					opacity: isOpen ? 1 : 0,
					transform: isOpen ? 'translateY(0) scale(1)' : 'translateY(10px) scale(0.8)'
				}"
				@click.stop="handleMenuItemClick('image')"
			>
				<uni-icons type="location"></uni-icons>
			</button>

			<button
				class="menu-item"
				:style="{
					transitionDelay: '120ms',
					opacity: isOpen ? 1 : 0,
					transform: isOpen ? 'translateY(0) scale(1)' : 'translateY(10px) scale(0.8)'
				}"
				@click.stop="handleMenuItemClick('share')"
			>
				<uni-icons type="location"></uni-icons>
			</button>

			<button
				class="menu-item"
				:style="{
					transitionDelay: '60ms',
					opacity: isOpen ? 1 : 0,
					transform: isOpen ? 'translateY(0) scale(1)' : 'translateY(10px) scale(0.8)'
				}"
				@click.stop="handleMenuItemClick('delete')"
			>
				<uni-icons type="location"></uni-icons>
			</button>
		</view>

		<!-- 主按钮 -->
		<button class="floating-button" :class="{ active: isOpen }" @click="toggleMenu">
			<text
				class="icon"
				:style="{
					transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
					transition: 'transform 0.3s ease'
				}"
			>
				+
			</text>
		</button>
	</view>
</template>

<script>
export default {
	name: 'FloatingButton',
	data() {
		return {
			isOpen: false
		};
	},
	methods: {
		toggleMenu() {
			this.isOpen = !this.isOpen;
		},
		handleMenuItemClick(action) {
			console.log('Menu item clicked:', action);
			this.isOpen = false;
		}
	}
};
</script>

<style>
/* nvue不支持scoped和部分CSS选择器，使用全局样式+类名隔离 */
.floating-container {
	position: fixed;
	left: 24px;
	bottom: 160px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* 菜单容器 */
.menu-items {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	transform-origin: center bottom;
}

/* 菜单项样式 */
.menu-item {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background-color: white;
	font-size: 20px;
	margin: 0;
	padding: 0;
	transition: all 0.3s ease;
	/* nvue对box-shadow支持有限，简化阴影 */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 主按钮样式 */
.floating-button {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: none;
	background-color: #3b82f6;
	color: white;
	font-size: 28px;
	font-weight: bold;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
	transition: all 0.3s ease;
}

.floating-button.active {
	background-color: #ef4444;
	transform: scale(0.95);
}

/* 图标样式 */
.icon {
	font-size: 60rpx;
	color: #fff;
	font-weight: 700;
	display: inline-block;
}

/* 图标颜色 */
.menu-item:nth-child(1) {
	color: #3b82f6;
}
.menu-item:nth-child(2) {
	color: #10b981;
}
.menu-item:nth-child(3) {
	color: #f59e0b;
}
.menu-item:nth-child(4) {
	color: #ef4444;
}

/* 解决nvue中按钮点击反馈问题 */
.floating-button:active,
.menu-item:active {
	opacity: 0.8;
}
</style>
